<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>An introduction to D3.js</title>
    <script src="./d3.js"></script>
</head>

<body>
    <div id="vizcontainer">
        <svg style="width:500px;height:500px;border:1px lightgray solid;"></svg>

    </div>
    <script>
        d3.select("svg")
            .append("circle")
            .attr("r", 20)
            .attr("cx", 20)
            .attr("cy", 20)
            .style("fill", "red");
        d3.select("svg")
            .append("text")
            .attr("id", "a")
            .attr("x", 20)
            .attr("y", 20)
            .style("opacity", 0)
            .text("D3.js 链式操作");
        d3.select("svg")
            .append("circle")
            .attr("r", 100)
            .attr("cx", 400)
            .attr("cy", 400)
            .style("fill", "lightblue");
        d3.select("svg")
            .append("text")
            .attr("id", "b")
            .attr("x", 400)
            .attr("y", 400)
            .style("opacity", 0)
            .text("hi");

        d3.select("#a").transition().delay(1000).style("opacity", 1);
        d3.select("#b").transition().delay(3000).style("opacity", .75);
        d3.selectAll("circle").transition().duration(2000).attr("cy", 200);
    </script>
</body>

</html>
